<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="maximum-scale=3, minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no">
		<title>向商家付款</title>
		<meta name="description" content="">
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/pay.css" />
		<script type="text/javascript" src="../../js/base.js" ></script>
		<script type="text/javascript" src="../../js/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="../../js/vue.js" ></script>
		<script type="text/javascript" src="../../js/keyboard.js" ></script>
		<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
	</head>
	<body>
		<div class="vue">
			<div class="flex-left mch">
				<div class="mch-img">
					<img src="../../img/shanghu.png" class="w"/>
				</div>
				<div class="mch-name">
					<p class="name flex-left"><a class="type">门店</a>{{mchInfo.mchName}}</p>
					<!--<p class="mch-type flex-left"><a class="type">门店</a><a class="address">山东路旗舰店</a></p>-->
				</div>
			</div>
			<div class="flex-center money-input">
				<div class="flex-auto">
					<input placeholder="消费金额" disabled v-model="moneyValue"/>
					<img src="../../img/moeny.png" />
				</div>
			</div>
			<div class="keyboard">
				<div class="number">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
						<li class="item">0</li>
						<li>.</li>
					</ul>
					<div>
						<div class="delete">
							<img src="../../img/delete.png" />
						</div>
						<p @click="pay">确认<br/>支付</p>
					</div>
				</div>
			</div>
		</div>	
	</body>
	
	<script>
		var vue=new Vue({ 
			el:".vue",
			data:{
				qrcode:false,
				mchInfo:null,
				moneyValue:""
			},
			mounted:function(){
				// 解析商家信息
			 	this.mchInfo=JSON.parse(localStorage.mchInfo);
			},
			methods: {
				
				// 确认支付
			    pay: function () {
			    	let mchInfo=vue.mchInfo;
			    	let currentPrice=this.moneyValue;
			    	if(!reg.test(currentPrice)){
			    		hint("金额格式错误");
			    		return 
			    	}
			    	
			    	let data={
			    		mchKey:localStorage.mchKey,
						currentPrice:currentPrice,
						browerType:localStorage.browerType,
						openMember:mchInfo.openMember,
						tradeTag:mchInfo.tradeTag,
						memTransType:"DINNING",
						auth_code:localStorage.auth_code
					};
			            	
			    	$.ajax({
						type:"post",
						url:url+"confirm_payment_amount",
						data:data,
						success:function(e){
							if(e.code=="0000"){
						   		AlipayClientPay(e.result);
							} else {
								hint(e.msg);
							}
						},
						error:function(e){
			    			hint(e.msg);
			    		}
					});
			    }
			    
			}
		});
		
		
		// 调起支付宝支付
		function AlipayClientPay(e){
			function ready(callback) {
			  // 如果jsbridge已经注入则直接调用
			  if (window.AlipayJSBridge) {
			    callback && callback();
			  } else {
			    // 如果没有注入则监听注入的事件
			    document.addEventListener('AlipayJSBridgeReady', callback, false);
			  }
			}
			
			function closeWeb(timeint){
	        	setTimeout(function(){
	        		AlipayJSBridge.call('closeWebview');  //支付宝
        	  	},timeint);	
	        }
			
			function confirmPayResult(){
	        	/**
	        		此处业务逻辑暂未实现，实现思路为，查询后台交易状态，以确定交易是否成功。
	        	*/
	        	hint("支付确认中,请稍后正在确认您的支付结果");
	        }
			
			ready(function(){
			    AlipayJSBridge.call("tradePay", {
			      tradeNO: e.payParams.tradeNO
			    }, function(result) {
			      	if(result.resultCode == '9000'){
						//location.href="pay_success.jsp";
			    		hint("支付成功,已完成本次付款，感谢您的光临！");
			    		closeWeb(1000);
			    	}else if(result.resultCode == '8000' || result.resultCode == '6004'){
				    	/*支付结果未知(可能已支付成功)：
				    	‘8000’：后台获取支付结果超时，暂时未拿到支付结果;
				    	‘6004’：支付过程中网络出错， 暂时未拿到支付结果;*/	
				    	confirmPayResult();
			    	}else if(result.resultCode == '6001'){			
			    		hint("您已取消本次支付");
			    		closeWeb(800);
			    	}else if(result.resultCode == '6002'){
			    		hint("网络原因导致支付失败");
			    	}else if(result.resultCode == '4000'){	
			    		hint("订单支付失败");
			    	}else{
			    		hint("其它原因支付中止");
			    	}
			    	/*支付失败或者支付中途退出：
			    	‘7001’：客户端-钱包中止快捷支付;
			    	‘6002’: 普通网络出错;
			    	‘6001’: 用户中途取消;
			    	‘4000’: 订单支付失败;
			    	‘99’: 用户点击忘记密码快捷界面退出(only iOS since 9.5);
			    	其他: 其他支付异常;*/
			    });
			});
		}
	</script> 
</html>